<template>
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>商品分类</span>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="普通分类" name="1"></el-tab-pane>
      <el-tab-pane label="特色分类" name="2"></el-tab-pane>
    </el-tabs>
    <div class="mar_t20" v-if="activeName=='1'">
      <el-button type="primary" size="medium" @click="handleEdit">新增分类</el-button>
      <el-button size="medium" @click="handleDelete">批量删除</el-button>
    </div>
    <div class="tabledata mar_t20 goodclass" v-if="activeName=='1'">
      <el-table
          v-loading="listLoading"
          :data="list"
          :element-loading-text="elementLoadingText"
          stripe
          row-key="id"
          style="width: 100%"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @selection-change="setSelectRows">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="sort"
            label="排序"
            width="150"
        >
        </el-table-column>
        <el-table-column
            prop="name"
            label="分类名称"
            width="300"
        >
          <template slot-scope="scope">
            <div class="bixuan">
              {{ scope.row.name }}
              <el-tag size="medium" type="danger" v-show="scope.row.isRequire && scope.row.isRequire=='1'">必选分类</el-tag>
              <div class="color_9 fon_12">分类ID: {{ scope.row.id }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="icon"
            label="分类图标"
        >
          <template slot-scope="scope">
            <div class="flex flex-y-top">
              <img
                  class="goodlogo bor_rad5"
                  :src="scope.row.icon"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="shijianduan"
            label="分类时间段"
            width="300"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.timeType=='1'">不限制</div>
            <div v-else>
              <div v-if="scope.row.startTime">{{ scope.row.startTime }}-{{ scope.row.endTime }}</div>
              <div>{{ scope.row.weekStr && scope.row.weekStr.map((item) => item).join() }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="spfl"
            label="启用状态"
            width="150"
        >
          <template slot-scope="scope">
            <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                       @change="changeSwitch(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="kc"
            label="操作"
        >
          <template slot-scope="scope">
            <div class="flex">
              <el-button v-if="scope.row.pid==0" type="text" @click="handleEdit2(scope.row.id)">新增二级分类
              </el-button>
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
<!--              <el-button v-if="scope.row.pid==0 && isInStore==1" type="text" @click="synchroGoods(scope.row)">复制到店内商品-->
<!--              </el-button>-->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          :current-page.sync='page.currentPage'
          @current-change="handleCurrentChange">
      </el-pagination>
      <edit ref="edit" @fetchData="fetchData"></edit>
    </div>
    <div class="tabledata mar_t20 goodclass" v-if="activeName=='2'">
      <el-table
          v-loading="listLoading2"
          :data="list2"
          :element-loading-text="elementLoadingText2"
          stripe
          row-key="id"
          style="width: 100%"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @selection-change="setSelectRows2">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="sort"
            label="排序"
            width="150"
        >
        </el-table-column>
        <el-table-column
            prop="name"
            label="分类名称"
            width="300"
        >
          <template slot-scope="scope">
            <div class="bixuan">
              {{ scope.row.name }}
              <div class="color_9 fon_12">默认文字: {{ scope.row.customName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="icon"
            label="分类图标"
        >
          <template slot-scope="scope">
            <div class="flex flex-y-top">
              <img
                  class="goodlogo bor_rad5"
                  :src="scope.row.icon"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="spfl"
            label="启用状态"
            width="150"
        >
          <template slot-scope="scope">
            <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                       @change="changeSwitch2(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="kc"
            label="操作"
        >
          <template slot-scope="scope">
            <div class="flex">
              <el-button type="text" @click="handleEdit3(scope.row)">编辑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          layout="prev, pager, next"
          :total="page2.total"
          :page-size="page2.pagesize"
          :current-page.sync='page2.currentPage'
          @current-change="handleCurrentChange2">
      </el-pagination>
      <edit ref="edit" @fetchData="fetchData"></edit>
      <edit2 ref="edit2" @fetchData="fetchData2"></edit2>
    </div>
  </div>
</template>
<script>
// import {showConfirm} from "@/utils/config";
import Edit from "./components/goodclassedit";
import Edit2 from "./components/goodclassedit2";
import {
  categoryDel,
  categoryList,
  changeCategorySwitch,
  synchroGoods,
  specialCategory,
  modifySpecial
} from "@/api/good";
import Sortable from 'sortablejs'

export default {
  components: {Edit, Edit2},
  created() {
    this.fetchData();
  },
  data() {
    return {
      activeName: '1',
      list: [],
      listLoading: true,
      selectRows: "",
      elementLoadingText: "正在加载...",
      page: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
      list2: [],
      listLoading2: true,
      selectRows2: "",
      elementLoadingText2: "正在加载...",
      page2: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
      isInStore: '',
    }
  },
  methods: {
    async handleTabClick() {
      if (this.activeName == '1') {
        this.fetchData()
      }
      if (this.activeName == '2') {
        this.fetchData2()
      }
    },
    async fetchData() {
      this.listLoading = true;
      const {data, count, isInStore} = await categoryList({page: this.page.currentPage});
      this.list = data;
      this.page.total = count;
      this.isInStore = isInStore
      setTimeout(() => {
        this.listLoading = false;
      }, 300);
    },
    async fetchData2() {
      this.listLoading2 = true;
      const {data, count} = await specialCategory({page: this.page2.currentPage,item:12});
      this.list2 = data;
      this.page2.total = count;
      setTimeout(() => {
        this.listLoading2 = false;
      }, 300);
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm("你确定要删除当前项吗", null, async () => {
          const {msg} = await categoryDel({id: row.id});
          this.$baseMessage(msg, "success");
          this.fetchData();
        });
      } else {
        if (this.selectRows.length > 0) {
          const id = this.selectRows.map((item) => item.id);
          this.$baseConfirm("你确定要删除选中项吗", null, async () => {
            const {msg} = await categoryDel({id});
            this.$baseMessage(msg, "success");
            this.fetchData();
          });
        } else {
          this.$baseMessage("未选中任何行", "error");
          return false;
        }
      }
    },
    async synchroGoods(row) {
      if (row.id) {
        this.$baseConfirm("您确定要将此商品分类以及此分类下面的商品全部复制到店内商品吗", null, async () => {
          const {msg} = await synchroGoods({typeId: row.id});
          this.$baseMessage(msg, "success");
          this.fetchData();
        });
      }
    },
    // rowDrop () {
    //   const tbody = document.querySelector('.el-table__body-wrapper tbody')
    //   const _this = this
    //   Sortable.create(tbody, {
    //     onEnd ({ newIndex, oldIndex }) {
    //       console.log(newIndex,oldIndex)
    //       const currRow = _this.tableData.splice(oldIndex, 1)[0]
    //       _this.tableData.splice(newIndex, 0, currRow)
    //       this.tableData=_this.tableData
    //     }
    //   })
    // },
    handleEdit(row) {
      if (row.id) {
        this.$refs["edit"].showEdit(row);
      } else {
        this.$refs["edit"].showEdit();
      }
    },
    handleEdit3(row) {
      if (row.id) {
        this.$refs["edit2"].showEdit(row);
      }
    },
    handleEdit2(pid) {
      this.$refs["edit"].showEdit2(pid);
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    handleCurrentChange2(val) {
      this.page2.currentPage = val;
      this.fetchData2();
    },
    setSelectRows2(val) {
      this.selectRows2 = val;
    },
    async changeSwitch(row) {
      const {msg} = await changeCategorySwitch({id: row.id, display: row.display});
      this.$baseMessage(msg, "success");
      this.fetchData();
    },
    async changeSwitch2(row) {
      const {msg} = await modifySpecial({id: row.id, display: row.display});
      this.$baseMessage(msg, "success");
      this.fetchData2();
    },
  }
}
</script>
<style lang="scss">
.bixuan .el-tag--medium {
  height: 20px;
  line-height: 18px;
}

.bixuan .el-tag {
  border-radius: 128px;
}
</style>
